<template>
  <div class="zlh-aside">
    <div id="zlh-aside-logo">zlhranhou</div>
    <el-menu
        :router=true
        active-text-color="#ffd43b"
        background-color="#343a40"
        class="el-menu-vertical-demo"
        default-active="/index"
        text-color="#fff"
        @open="handleOpen"
        @close="handleClose"
    >
      <el-menu-item index="/index" >
        <el-icon><House /></el-icon>
        <span>工作台</span>
      </el-menu-item>
      <el-menu-item index="/article">
        <el-icon><Tickets /></el-icon>
        <span>文章管理</span>
      </el-menu-item>
      <el-menu-item index="2">
        <el-icon><icon-menu /></el-icon>
        <span>公告管理</span>
      </el-menu-item>
      <el-menu-item index="3">
        <el-icon><ChatLineSquare /></el-icon>
        <span>留言管理</span>
      </el-menu-item>
      <el-menu-item index="4">
        <el-icon><Connection /></el-icon>
        <span>友链管理</span>
      </el-menu-item>
      <el-sub-menu index="5">
        <template #title>
          <el-icon><Setting /></el-icon>
          <span>系统内部设置</span>
        </template>
        <el-menu-item-group title="文章设置">
          <el-menu-item index="/article-type-setting">类型设置</el-menu-item>
          <el-menu-item index="/article-tips-setting">标签设置</el-menu-item>
        </el-menu-item-group>
      </el-sub-menu>
    </el-menu>
  </div>

</template>

<script lang="ts">
export default {
  name:'AsideBox'
}
</script>

<script lang="ts" setup>
import { ref } from 'vue'
import {
  Connection,
  Setting,
  Menu as IconMenu,
  Tickets,
  ChatLineSquare,
  House,
} from '@element-plus/icons-vue'


const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
</script>

<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}


.el-menu{
  border-right:none
}
</style>
